<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 导入 css   -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-editable.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-editable.css}">

    <!-- 导入 js   -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.serializeJSON.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-table.min.js}"></script>
    <script th:src="@{/js/bootstrap-editable.min.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.min.js}"></script>


    <script th:inline="javascript">
        // 通过模版引擎获取项目名
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';

        /*]]>*/


        /**
         * 页面加载完毕
         */
        $(function () {
            setTable();
        })

        /**
         * 设置 table
         */
        function setTable() {
            $("#tab").bootstrapTable({
                // 添加分页属性
                // 是否显示分页
                //一定要写！！可以选择：用于 edittable
                clickToSelect: true,
                // 点击选中一行
                pagination: true,
                // 分页方式 client客户端分页，server服务端分页（*）
                sidePagination: "server",
                // 初始化加载第一页，默认第一页
                pageNumber: 1,
                // 每页的的记录数
                pageSize: 10,
                // 可以选择的每页的行数
                pageList: [3, 5, 7, 9, 11, 13],
                // 发送数据属性
                // 数据类型
                dataType: "json",
                // 是否使用缓存，默认使用
                cache: true,
                // 请求方式
                type: "get",
                // 请求的 URL
                url: ctxPath + "api/wallpaper/getAll",

                // 默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                // 设置为 ''  在这种情况下传给服务器的参数为：pageS_ize,pageNumber
                queryParamsType: 'undefined',
                queryParams: function queryParams(params) {
                    return {
                        /**
                         * e.g. http://localhost:8081/call/UserManagement/getAll?pageNumber=1&pageSize=10&_=1605173544640
                         * 键 pageNumber 和 pageSize 是 action 的参数
                         * 值 params.pageNumber,params.pageSize, 是内置，不能更改
                         */
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize
                    };
                },

                // 通过 responseHandler 把响应的数据中的数据拿出来
                responseHandler: function (ResponseEntity) {
                    if (ResponseEntity.code === 1) {
                        return {
                            rows: ResponseEntity.data.records,
                            total: ResponseEntity.data.total,
                        }
                    }
                },
                columns: [
                    // 删除的多选框
                    {checkbox: true},
                    {
                        field: "id",
                        title: "序号",
                        formatter: function (value, row, index) {
                            return `<a href="${ctxPath}api/wallpaper/download/${value}">${value}</a>`
                        }
                    },
                    {
                        field: "name",
                        title: "壁纸名称",
                    },

                    {
                        field: "remoteUrl",
                        title: "远程地址",
                        formatter: function (value, row, index) {
                            return `<img src="${value}" height="20px" width="20px" alt="图片">`;
                        }
                    },
                    {
                        field: "localUrl",
                        title: "本地地址",
                    },
                    {
                        field: "size",
                        title: "文件大小",
                        formatter: function (value, row, index) {
                            return value;
                        }
                    },
                    {
                        field: "downloadTime",
                        title: "下载时间",
                        formatter: function (value, row, index) {
                            return new Date(value).toLocaleString();
                        }
                    },
                ],
            });
        }


    </script>
</head>
<body>


<!--所有bs的组件必须写在一个class=container的div中-->
<div class="container">
    <!--定义页头-->
    <div class="page-header">
        <h1>壁纸库</h1>
        <!---定义一个表格-->
        <div class="panel panel-default">
            <div class="panel-heading">展示</div>
            <table class="table" id="tab">
            </table>
        </div>
    </div>
</div>
</body>
</html>